<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>词云</title>
    </head>
    <body>
        <div id="vis" style="width:800px;height:800px;text-align: center;border:1px red solid;border-radius: 400px;"></div>
        <script src="js/d3.min.js"></script>
        <script src="js/d3.layout.cloud.js"></script>
        <script>
            var texts = [
                '交淡若水', '一往无前', '一往无前', '水深火热', '水深火热', '水深火热', '水深火热', '水深火热', '水深火热', '水深火热', '水深火热', '水深火热',
                '水深火热', '三省吾身', '三省吾身', '三省吾身', '三省吾身', '三省吾身', '三省吾身', '緑酒红灯', '緑酒红灯', '緑酒红灯', '夺门而出', '夺门而出',
                '夺门而出', '夺门而出', '夺门而出', '夺门而出', '夺门而出', '夺门而出', '夺门而出', '亡魂丧胆', '亡魂丧胆', '亡魂丧胆', '亡魂丧胆', '腾声飞实',
                '腾声飞实', '腾声飞实', '腾声飞实', '腾声飞实', '腾声飞实', '腾声飞实', '功标青史', '功标青史', '功标青史', '功标青史', '功标青史', '约法三章',
                '约法三章', '约法三章', '约法三章', '约法三章', '魂不守舍', '魂不守舍', '魂不守舍', '魂不守舍', '魂不守舍', '魂不守舍', '魂不守舍', '月下老人',
                '月下老人', '月下老人', '月下老人', '月下老人', '月下老人', '乡利倍义', '乡利倍义', '乡利倍义', '乡利倍义', '乡利倍义', '乡利倍义', '乡利倍义',
                '灯红酒緑', '灯红酒緑', '灯红酒緑', '灯红酒緑', '灯红酒緑', '灯红酒緑', '灯红酒緑', '灯红酒緑', '灯红酒緑', '灯红酒緑', '念念不忘', '念念不忘',
                '念念不忘', '念念不忘', '念念不忘', '念念不忘', '念念不忘', '念念不忘', '念念不忘', '念念不忘', '念念不忘', '发迹变泰', '发迹变泰', '发迹变泰',
                '发迹变泰', '发迹变泰', '发迹变泰', '消极怠工', '消极怠工', '消极怠工', '消极怠工', '消极怠工', '消极怠工', '消极怠工', '消极怠工', '消极怠工',
                '门无杂客', '门无杂客', '门无杂客', '门无杂客', '门无杂客', '门无杂客', '门无杂客', '门无杂客', '门无杂客', '门无杂客', '门无杂客', '门无杂客',
                '非愚则诬', '非愚则诬', '非愚则诬', '非愚则诬', '非愚则诬', '非愚则诬', '非愚则诬', '书囊无底', '书囊无底', '书囊无底', '书囊无底', '春风化雨',
                '春风化雨', '春风化雨', '春风化雨', '春风化雨', '春风化雨', '春风化雨', '春风化雨', '春风化雨', '春风化雨', '春风化雨', '步步登高', '步步登高',
                '步步登高', '步步登高', '步步登高', '步步登高', '子曰诗云', '子曰诗云', '子曰诗云', '子曰诗云', '子曰诗云', '子曰诗云', '生死之交', '生死之交',
                '生死之交', '生死之交', '生死之交', '生死之交', '生死之交', '生死之交', '生死之交', '生死之交', '生死之交', '落花流水', '落花流水', '落花流水',
                '落花流水', '落花流水', '落花流水', '落花流水', '变化无穷', '变化无穷', '变化无穷', '变化无穷', '变化无穷', '变化无穷', '变化无穷', '变化无穷',
                '镜花水月', '镜花水月', '镜花水月', '镜花水月', '镜花水月', '镜花水月', '镜花水月', '镜花水月', '镜花水月', '镜花水月', '镜花水月', '风和日丽',
                '风和日丽', '风和日丽', '风和日丽', '风和日丽', '风和日丽', '风和日丽', '风和日丽', '万里长城', '万里长城', '万里长城', '万里长城', '万里长城',
                '万里长城', '义不取容', '义不取容', '义不取容', '义不取容', '义不取容', '义不取容', '义不取容', '义不取容', '视同陌路', '视同陌路', '视同陌路',
                '视同陌路', '视同陌路', '视同陌路', '视同陌路', '视同陌路', '视同陌路', '士饱马腾', '士饱马腾', '士饱马腾', '士饱马腾', '士饱马腾', '士饱马腾',
                '士饱马腾', '士饱马腾', '士饱马腾', '人己一视', '人己一视', '人己一视', '人己一视', '人己一视', '人己一视', '工力悉敌', '工力悉敌', '工力悉敌',
                '绩学之士', '绩学之士', '绩学之士', '绩学之士', '绩学之士', '平流缓进', '平流缓进', '平流缓进', '平流缓进', '平流缓进', '平流缓进', '平流缓进',
                '平流缓进', '平流缓进', '白手起家', '白手起家', '一事无成', '一事无成', '一事无成', '一事无成', '一事无成', '一事无成', '一事无成', '语重心长',
                '语重心长', '语重心长', '和盘托出', '和盘托出', '和盘托出', '和盘托出', '和盘托出', '和盘托出', '身败名裂', '身败名裂', '身败名裂', '身败名裂',
                '身败名裂', '身败名裂', '身败名裂', '身败名裂', '身败名裂', '身败名裂', '身败名裂', '身败名裂', '拔苗助长', '拔苗助长', '拔苗助长', '拔苗助长',
                '拔苗助长', '拔苗助长', '客死他乡', '客死他乡', '客死他乡', '客死他乡', '客死他乡', '客死他乡', '客死他乡', '别有洞天', '别有洞天', '别有洞天',
                '别有洞天', '别有洞天', '别有洞天', '别有洞天', '人来人往', '人来人往', '人来人往', '人来人往', '人来人往', '人来人往', '人来人往', '人来人往',
                '人来人往', '人来人往', '人来人往', '绿酒红灯', '绿酒红灯', '山清水秀', '山清水秀', '章父荐屦', '章父荐屦', '章父荐屦', '张灯结彩', '张灯结彩',
                '张灯结彩', '张灯结彩', '张灯结彩', '张灯结彩', '张灯结彩', '舍我其谁', '舍我其谁', '谁是谁非', '谁是谁非', '谁是谁非', '谁是谁非', '谁是谁非',
                '谁是谁非', '价增一顾', '价增一顾', '价增一顾', '价增一顾', '价增一顾', '价增一顾', '价增一顾', '价增一顾', '价增一顾', '价增一顾', '价增一顾',
                '顾此失彼', '顾此失彼', '顾此失彼', '家给民足', '家给民足', '家给民足', '家给民足', '策顽磨钝', '策顽磨钝', '策顽磨钝', '策顽磨钝', '策顽磨钝',
                '策顽磨钝', '策顽磨钝', '策顽磨钝', '世异时移', '世异时移', '世异时移', '世异时移', '此唱彼和', '此唱彼和', '此唱彼和', '此唱彼和', '此唱彼和',
                '散带衡门', '散带衡门', '散带衡门', '散带衡门', '散带衡门', '散带衡门', '散带衡门', '散带衡门', '散带衡门', '出卖灵魂', '出卖灵魂', '出卖灵魂',
                '出卖灵魂', '出卖灵魂', '出卖灵魂', '出卖灵魂', '出卖灵魂', '出卖灵魂', '助人为乐', '助人为乐', '助人为乐', '助人为乐', '助人为乐', '助人为乐',
                '助人为乐', '泰山磐石', '泰山磐石', '泰山磐石', '泰山磐石', '泰山磐石', '泰山磐石', '泰山磐石', '泰山磐石', '泰山磐石', '泰山磐石', '泰山磐石',
                '下乔入幽', '下乔入幽', '下乔入幽', '下乔入幽', '下乔入幽', '下乔入幽', '走马观花', '走马观花', '走马观花', '走马观花', '走马观花', '走马观花',
                '走马观花', '走马观花', '走马观花', '钝学累功', '钝学累功', '钝学累功', '钝学累功', '钝学累功', '自由自在', '自由自在', '自由自在', '自由自在',
                '进德脩业', '进德脩业', '史不绝书', '史不绝书', '史不绝书', '史不绝书', '史不绝书', '史不绝书', '史不绝书', '史不绝书', '业峻鸿绩', '穿红着绿',
                '穿红着绿', '穿红着绿', '穿红着绿', '穿红着绿', '穿红着绿', '穿红着绿', '穿红着绿', '穿红着绿', '穿红着绿', '市不二价', '市不二价', '市不二价',
                '敌不可纵', '敌不可纵', '敌不可纵', '敌不可纵', '敌不可纵', '天罗地网', '天罗地网', '天罗地网', '天罗地网', '灯火万家', '马到成功', '马到成功',
                '马到成功', '马到成功', '马到成功', '马到成功', '马到成功', '马到成功', '马到成功', '马到成功', '胆丧魂消', '胆丧魂消', '胆丧魂消', '胆丧魂消',
                '膝行肘步', '膝行肘步', '膝行肘步', '膝行肘步', '膝行肘步', '膝行肘步', '膝行肘步', '膝行肘步', '膝行肘步', '膝行肘步', '膝行肘步', '安居乐业',
                '安居乐业', '安居乐业', '安居乐业', '安居乐业', '安居乐业', '安居乐业', '安居乐业', '取乱存亡', '取乱存亡', '取乱存亡', '取乱存亡', '取乱存亡',
                '取乱存亡', '穷言杂语', '穷言杂语', '穷言杂语', '穷言杂语', '穷言杂语', '穷言杂语', '穷言杂语', '穷言杂语', '穷言杂语', '穷言杂语', '穷言杂语',
                '穷言杂语', '路见不平', '路见不平', '路见不平', '路见不平', '路见不平', '移易迁变', '移易迁变', '移易迁变', '移易迁变', '移易迁变', '移易迁变',
                '移易迁变', '诬良为盗', '诬良为盗', '诬良为盗', '诬良为盗', '诬良为盗', '诬良为盗', '诬良为盗', '诬良为盗', '诬良为盗', '诬良为盗', '诬良为盗',
                '云飞雨散', '云飞雨散', '云飞雨散', '红男绿女', '红男绿女', '红男绿女', '红男绿女', '红男绿女', '红男绿女', '红男绿女', '红男绿女', '红男绿女',
                '红男绿女', '红男绿女', '实偪处此', '实偪处此', '实偪处此', '实偪处此', '实偪处此', '实偪处此', '实偪处此', '实偪处此', '瓜田李下', '瓜田李下',
                '二三君子', '二三君子', '二三君子', '二三君子', '二三君子', '二三君子', '二三君子', '二三君子', '二三君子', '二三君子', '二三君子', '底死谩生',
                '底死谩生', '底死谩生', '底死谩生', '春暖花开', '春暖花开', '春暖花开', '春暖花开', '春暖花开', '春暖花开', '春暖花开', '落地生根', '落地生根',
                '落地生根', '落地生根', '落地生根', '落地生根', '落地生根', '落地生根', '落地生根', '落地生根', '落地生根', '裂裳裹膝', '裂裳裹膝', '裂裳裹膝',
                '裂裳裹膝', '鸟语花香', '鸟语花香', '鸟语花香', '鸟语花香', '鸟语花香', '鸟语花香', '鸟语花香', '鸟语花香', '鸟语花香', '鸟语花香', '鸟语花香',
                '十字路口', '十字路口', '出谋划策', '门庭如市', '门庭如市', '门庭如市', '门庭如市', '门庭如市', '门庭如市', '高悬秦镜', '高悬秦镜', '高悬秦镜',
                '高悬秦镜', '高悬秦镜', '幽期密约', '幽期密约', '幽期密约', '幽期密约', '幽期密约', '数一数二', '数一数二', '数一数二', '数一数二', '语四言三',
                '语四言三', '语四言三', '语四言三', '语四言三', '语四言三', '语四言三', '语四言三', '语四言三', '语四言三', '语四言三', '语四言三', '纵横天下',
                '纵横天下', '纵横天下', '纵横天下', '纵横天下', '纵横天下', '纵横天下', '纵横天下', '纵横天下', '纵横天下', '纵横天下', '千军万马', '自以为是',
                '自以为是', '自以为是', '自以为是', '自以为是', '自以为是', '自以为是', '自以为是', '自以为是', '自以为是', '自以为是', '自以为是', '自以为是',
                '自以为是', '自以为是', '自以为是', '自以为是', '自以为是', '自以为是', '足不出门', '水滴石穿', '彼弃我取', '彼弃我取', '彼弃我取', '东山再起',
                '东山再起', '东山再起', '东山再起', '东山再起', '东山再起', '东山再起', '东山再起', '东山再起', '东山再起', '东山再起', '东山再起', '盗名欺世',
                '盗名欺世', '盗名欺世', '盗名欺世', '盗名欺世', '盗名欺世', '容光焕发', '容光焕发', '容光焕发', '容光焕发', '容光焕发', '容光焕发', '容光焕发',
                '容光焕发', '容光焕发', '容光焕发', '石赤不夺', '石赤不夺', '石赤不夺', '石赤不夺', '石赤不夺', '石赤不夺'
            ];
            var obj = {};
            for (var i = 0; i < texts.length; i++) {
                var key = texts[i];
                var value = obj[key];
                if (value) {
                    obj[key] = value + 1;
                } else {
                    obj[key] = 1;
                }
            }

            var arrs = [];
            for (var p in obj) {
                if (texts.indexOf(p) >= 0) {
                    var count = obj[p];
                    if (count >= 0 && count < 3) {
                        var o = {
                            "text": p,
                            "size": 8
                        };
                        arrs.push(o);
                    }
                    if (count >= 3 && count < 8) {
                        var o = {
                            "text": p,
                            "size": 14
                        };
                        arrs.push(o);
                    }
                    if (count >= 8 && count < 12) {
                        var o = {
                            "text": p,
                            "size": 24
                        };
                        arrs.push(o);
                    }
                    if (count >= 12) {
                        var o = {
                            "text": p,
                            "size": 38
                        };
                        arrs.push(o);
                    }
                }
            }

            var fill = d3.scale.category20();
            var layout = d3.layout.cloud()
                .size([800, 400]) // 外围布局的宽高
                .words(arrs) // 数据: 格式必须是[{text: '', size: ''},{text: '', size: ''}]
                .padding(5)
                .rotate(function() { // 每个词条的旋转角度
                    return ~~(Math.random() * 2) * 90;
                    // return ((Math.random() * 6) - 3) * 20;
                    // return 0;
                })
                .font("Impact")
                .fontSize(function(d) {
                    return d.size; // 数据中size属性
                })
                .on("end", function(words) {
                    d3.select("#vis").append("svg")
                        .attr("width", layout.size()[0])
                        .attr("height", layout.size()[1])
                        .append("g")
                        .attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")")
                        .selectAll("text")
                        .data(words)
                        .enter()
                        // .append("a").attr("xlink:href", "https://www.baidu.com").attr("target", "_blank").style("cursor", "pointer")
                        .append("text")
                        .style("font-size", function(d) {
                            return d.size + "px";
                        })
                        .style("font-family", "Impact")
                        .style("fill", function(d, i) {
                            return fill(i); // 字体填充颜色默认随机
                        })
                        .attr("text-anchor", "middle")
                        .attr("transform", function(d) {
                            return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
                        })
                        .text(function(d) {
                            return d.text;
                        });
                });
            layout.start();
        </script>
    </body>
</html>
